<template>
  <div class="author-base-info-wrapper">
    <img :src="authorAvatarUrl" :alt="authorName" @click="gotoAuthor">
    
    <div class="name-sign">
      <h2 class="name">{{author.username}}</h2>
      <h3 class="sign">{{author.sign || '这里什么也没有，这是个神秘的人~'}}</h3>
    </div>

    <button class="follow" @click="follow"
    :style="buttonSty">{{ifFollowSign}}</button>
  </div>
</template>

<script>
  export default {
    props: {
      author: {
        type: Object,
        default: () => {
          return {
            username: '江户川哀',
            avatar: '',
            sign: '理想是做出最棒的国产IDE',
          }
        }
      },
    },
    data() {
      return {
        authorName: 'xxxx'
      }
    },
    computed: {
      ifFollowSign() {
        return this.author.is_follow ? '已关注' : '关注' 
      },
      buttonSty() {
        if(this.author.is_follow) return {
          color: 'var(--blue)',
          border: '1px solid var(--lightBlue)'
        }
      },
      authorAvatarUrl() {
        return this.author.avatar
        ? this.$baseURL + this.author.avatar
        : this.$baseURL + this.$defaultAssetUrls.avatar;
      }
    },
    methods: {
      follow() {
        this.$emit('follow');
      },
      gotoAuthor() {
        this.$router.push({
          path: `/author/${this.author.id}/profile/article`
        })
      }
    },
  }
</script>

<style lang="less" scoped>
@w: var(--authorBaseInfoWidth);
@h: var(--authorBaseInfoHeight);
@ih: calc(@h * 2 / 3);

.author-base-info-wrapper {
  box-sizing: border-box;
  background-color: white;
  width: @w;
  height: @h;
  display: flex;
  align-items: center;

  img,
  .name-sign {
    float: left;
    height: @ih;
  }

  img {
    margin-left: 5%;
    width: @ih;
    border-radius: 50%;

    &:hover {
      cursor: pointer;
    }
  }

  .name-sign {
    margin-left: calc(@w * 0.04);

    h2 {
      font-size: calc(@h * 0.2);
      line-height: 2;
    }

    h3 {
      font-size: calc(@h * 0.12);
      line-height: 1.5;
    }
  }

  .follow {
    position: absolute;
    right: calc(@h * 0.2);
    top: 50%;
    transform: translateY(-50%);

    --h: calc(@h * 0.3);
    height: var(--h);
    width: calc(@w * 0.1);
    border-radius: calc(var(--h) * 0.2);
    text-align: center;
    line-height: var(--h);
    font-size: calc(@h * 0.13);

    border: 1px solid var(--gray);
    color: var(--dark);

    &:hover {
      color: var(--blue);
      border: 1px solid var(--lightBlue); 
    }
  }
}
</style>